<template lang="pug">
  .clearfix
    Modal(
      width="80%"
      v-model="isShowLookPayListModal"
      title="查看付款"
      class-name="vertical-center-modal"
      :mask-closable="false"
    )
      .pl-20.pr-20.bg-white.overflow-y-scroll(style="max-height: 500px")
        Table.beautiful-table(:columns="setThead" :data="tableData" :stripe="true" ref="demoTable"
          @on-selection-change="handleOnSelectChange"
        )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(type="text" size="small" @click="handleDownLoadAttachment(row)" :disabled="!(row.attachmen && row.attachmen.path)") 附件下载
            Button.mr-10(type="text" size="small" @click="handleDownLoadPayAttachmen(row)" :disabled="!(row.payAttachmen && row.payAttachmen.path)") 付款反馈下载
            Button.mr-10(v-if="['socialSecurity', 'providentFund', 'commercial', 'salary'].indexOf(modalType) != -1" type="text" size="small" @click="handleDownLoad(row)") 下载
            Button.mr-10(v-if="['socialSecurity', 'providentFund', 'commercial', 'salary', 'daiyushenqing'].indexOf(modalType) != -1" type="text" size="small" @click="isDeleteModal(row)") 删除
            Button.mr-10(v-if="['daiyuyingfu'].indexOf(modalType) != -1" type="text" :disabled="row.status!=3"  @click="handleShowSendBackModal(row,-2)") 退回
            Button(v-if="isWorkFlow" type="text" size="small" @click="handleShowAuditDetailModal(row)") 查看审批详情

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 关闭

      //- 退回弹窗
      SendBackModal(ref="SendBackModal" @query='query')
</template>

<script>
import { SalaryPayableBillApi } from '@/api/SalaryPayableBill.api.js'
import { FinanceSSPayableApi } from '@/api/FinanceSSPayable.api.js'
import { FinancePFPayableApi } from '@/api/FinancePFPayable.api.js'
import { FinanceCPayableApi } from '@/api/FinanceCPayable.api.js'
import { OrganizationBankApi } from '@/api/OrganizationBank.api.js'
import { FinanceTreatmentPayableApi } from '@/api/FinanceTreatmentPayable.api.js'
import SendBackModal from "../publicModal/SendBackModal.vue"
import { Common } from '@/utils/common.js'
import _cloneDeep from 'clone-deep'
import { LookPayListThead } from './tableHead'
export default {
  name: '',

  props: {
  },

  computed: {
    isWorkFlow () {
      const workFlow = (JSON.parse(localStorage.getItem('clientLoginInfo'))).data.workFlow == 'true' ? true : false
      return workFlow
    },
    setThead () {
      if (this.modalType === 'daiyuyingfu' || this.modalType === 'daiyushenqing') {
        this.thead[3].title = '账号名称'
        this.thead[3].key = 'accountName'
      }
      if (this.isWorkFlow) {
        return this.thead.slice(1, this.thead.length + 1) 
      } else {
        return [...this.thead.slice(1, 2), ...this.thead.slice(3, this.thead.length + 1)]
      }
      // return this.thead.slice(1, this.thead.length + 1)
    },
  },


  components: {
    SendBackModal
  },

  data () {  
    return {
      isShowLookPayListModal: false,
      thead: _cloneDeep(LookPayListThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
        total: 0, // 应付总计
      },
      selectedArr: [],
      selectedIdArr: [],
      modalType: null,
      parentRow: null,
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query (row) {
      console.log('this.modalType: ', this.modalType)
      console.log('row: ', row)
      var params = {
        PeriodYear: row.periodYear,
        PeriodMonth: row.periodMonth,
        IsPay: false,
        // SecurityNo: row.socialSecurityNo,
      }
      var serverApi
      if (this.modalType === 'salary') {
        serverApi = SalaryPayableBillApi
      } else if (this.modalType === 'socialSecurity') {
        params.securityNo = row.socialSecurityNo
        serverApi = FinanceSSPayableApi
      } else if  (this.modalType === 'providentFund') {
        params.securityNo = row.providentFundNo
        serverApi = FinancePFPayableApi
      } else if  (this.modalType === 'commercial') {
        params.securityNo = row.commercialNo
        params.commercialID = row.commercialID
        serverApi = FinanceCPayableApi
      } else if (this.modalType === 'daiyuyingfu' || this.modalType === 'daiyushenqing') {
        params.TPBillsID = row.id
        serverApi = FinanceTreatmentPayableApi
        console.log('serverApi: ', FinanceTreatmentPayableApi)
      }
      let res = await serverApi.getPayList(params)
      console.log('付款信息列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.name }
      })
      this.selectedIdArr = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedIdArr)
    },

    cancel () {
      console.log('查看付款点击了关闭')
      this.isShowLookPayListModal = false
      this.$emit('query')
    },

    show () {
      // this.isCanSubmit = true
      this.isShowLookPayListModal = true
    },

    // 是否删除前询问
    isDeleteModal (row, status) {
      this.$Modal.confirm({
        title: '是否确认删除该条信息',
        onOk: () => {
          this.handleDel(row, status)
        }
      })
    },

    // 删除
    async handleDel (row) {
      var params = {
        id: row.id,
        year: row.periodYear
      }
      console.log('params: ', params)
      var serverApi
      if (this.modalType === 'salary') {
        serverApi = SalaryPayableBillApi
      } else if (this.modalType === 'socialSecurity') {
        serverApi = FinanceSSPayableApi
      } else if  (this.modalType === 'providentFund') {
        serverApi = FinancePFPayableApi
      } else if  (this.modalType === 'commercial') {
        params.commercialID = row.commercialID
        serverApi = FinanceCPayableApi
      } else if  (this.modalType === 'daiyuyingfu' || this.modalType === 'daiyushenqing') {
        // params.TPBillsID = row.id
        serverApi = FinanceTreatmentPayableApi
      }
      let res = await serverApi.deletePayApply(params)
      console.log('删除res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query(this.parentRow)
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    handleDownLoad (row) {
      console.log(row.filePath)
      if (row.filePath) {
        window.open(row.filePath, '_blank')
      } else {
        this.$Message.warning({
          content: '不能下载',
          duration: 10,
          closable: true
        })
      }
    },

    // 退回
    handleShowSendBackModal (row,backType) {
      this.$refs.SendBackModal.parentRow = this.parentRow
      this.$refs.SendBackModal.show(row,backType)
      this.$refs.SendBackModal.modalType = this.modalType
    },

    // 查看审批详情
    handleShowAuditDetailModal (row) {
      console.log('查看审批详情 row: ', row)
      this.$emit('handleShowAuditDetailModal', row)
    },

    // 附件下载
    handleDownLoadAttachment (row) {
      if (row.attachmen && row.attachmen.path) {
        let str = row.attachmen.path
        console.log('附件下载: ', str.substring(str.indexOf('\Content') - 1))
        let path = str.substring(str.indexOf('\Content') - 1)
        window.open(path, '_blank')
      } else {
        this.$Message.warning({
          content: '不能下载',
          duration: 10,
          closable: true
        })
      }
    },

    // 付款反馈下载
    handleDownLoadPayAttachmen (row) {
      if (row.payAttachmen && row.payAttachmen.path) {
        let str = row.payAttachmen.path
        console.log('付款反馈下载: ', str.substring(str.indexOf('\Content') - 1))
        let path = str.substring(str.indexOf('\Content') - 1)
        window.open(path, '_blank')
      } else {
        this.$Message.warning({
          content: '不能下载',
          duration: 10,
          closable: true
        })
      }
    },
  }
}
</script>

<style lang="less" scope>
</style>
